<template>
  <div>
    <h2 style="margin-bottom: 30px">{{ title }}</h2>
    <el-form :model="productCheck" label-width="auto">
      <el-form-item label="项目简称：">
        <el-select
          style="width: 30%"
          v-model="productCheck.projectId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :label="item.projectShortName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工程名称：">
        <el-input
          style="width: 30%"
          v-model="productCheck.constructName"
          placeholder="请输入单位工程名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="单位工程名称：">
        <el-input
          style="width: 30%"
          v-model="productCheck.deptConstructName"
          placeholder="请输入单位工程名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="分部名称：">
        <el-select
          style="width: 30%"
          v-model="productCheck.branchId"
          placeholder="请选择"
          @change="branchIdChange"
        >
          <el-option
            v-for="item in itemOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联计划：">
        <el-cascader
          style="width: 30%"
          v-model="planTypeArr"
          :options="relaySchemaOptions"
          :props="{
            label: 'name',
            value: 'id',
            children: 'projectPlans',
          }"
          @change="relaySchemaChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="报验项目：">
        <el-row
          style="width: 30%"
          type="flex"
          justify="space-between"
          v-for="item in productItemList"
          :key="item.id"
        >
          <el-col :span="5"
            >{{ item.name ? item.name : item.itemName }}
            <span style="display: none">{{ (item.itemId = item.id) }}</span>
          </el-col>
          <el-col :span="12"
            ><el-radio v-model="item.pass" :label="1">合格</el-radio
            ><el-radio v-model="item.pass" :label="0">不合格</el-radio></el-col
          >
          <el-col :span="6">
            <el-select
              style="width: 100%"
              size="small"
              v-model="item.selfCheck"
              placeholder="请选择"
            >
              <el-option
                v-for="item in manOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="线别：">
        <el-select
          style="width: 30%"
          v-model="productCheck.lineType"
          placeholder="请选择"
        >
          <el-option
            v-for="el in lineTypeOptions"
            :key="el.value"
            :label="el.name"
            :value="el.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="验收区间：">
        <el-row style="width: 30%; text-align: center" type="flex">
          <el-col :span="2">DK</el-col>
          <el-col :span="4"
            ><el-input
              v-model="productCheck.intervalStartKm"
              @blur="productCheck.intervalStartKm = Number(productCheck.intervalStartKm)"
            ></el-input
          ></el-col>
          <el-col :span="1">+</el-col>
          <el-col :span="4"
            ><el-input
              v-model="productCheck.intervalStartM"
              @blur="productCheck.intervalStartM = Number(productCheck.intervalStartM)"
            ></el-input
          ></el-col>
          <el-col :span="2">到</el-col>
          <el-col :span="2">DK</el-col>
          <el-col :span="4"
            ><el-input
              v-model="productCheck.intervalEndKm"
              @blur="productCheck.intervalEndKm = Number(productCheck.intervalEndKm)"
            ></el-input
          ></el-col>
          <el-col :span="1">+</el-col>
          <el-col :span="4"
            ><el-input
              v-model="productCheck.intervalEndM"
              @blur="productCheck.intervalEndM = Number(productCheck.intervalEndM)"
            ></el-input
          ></el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="验收里程：">
        <el-input
          style="width: 30%"
          placeholder="请输入验收里程/米"
          v-model="productCheck.mileage"
          @blur="productCheck.mileage = Number(productCheck.mileage)"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="专检负责人：">
        <el-select
          style="width: 30%"
          v-model="productCheck.specialCheck"
          placeholder="请选择"
        >
          <el-option
            v-for="item in manOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="技术主管：">
        <el-select
          style="width: 30%"
          v-model="productCheck.technicalManager"
          placeholder="请选择"
        >
          <el-option
            v-for="item in manOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="基地负责人：">
        <el-select
          style="width: 30%"
          v-model="productCheck.baseLeader"
          placeholder="请选择"
        >
          <el-option
            v-for="item in manOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="附件列表：">
        <el-upload
          style="width: 30%; color: rgb(199, 199, 199)"
          class="upload-demo"
          action="#"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :auto-upload="false"
          :on-exceed="handleExceed"
          :on-change="handleChange"
          :file-list="productCheck.annexList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传doc/pdf文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="检查日期：">
        <el-date-picker
          style="width: 30%"
          v-model="productCheck.checkDate"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-row style="height: 100px; box-sizing: border-box; margin: 10px 0 0 20%">
      <el-button plain @click="$router.back(-1)">返回</el-button>
      <el-button type="primary" @click="saveHandler">保存并提交审批</el-button>
    </el-row>
  </div>
</template>

<script>
import {
  getManagementList,
  getBranchItemList,
  getEnableUserList,
} from "../../../http/commonApi.js";
import { getrelaySchemaList } from "../../../http/inTellingSchedule/inspectBatch.js";
import { getDataType } from "../../../http/dictionary.js";
import {
  updateProductCheck,
  saveProductCheck,
} from "../../../http/inTellingSchedule/processAcceptList.js";
import { uploadAnnexFile } from "../../../http/commonApi.js";
export default {
  data() {
    return {
      relaySchemaOptions: [],
      title: "新增",
      planTypeArr: [],
      productCheck: {
        id: null,
        projectId: null,
        branchId: null,
        planType: null,
        planId: null,
        lineType: "",
        intervalStartKm: null,
        intervalStartM: null,
        intervalEndKm: null,
        intervalEndM: null,
        mileage: null,
        specialCheck: null,
        technicalManager: null,
        baseLeader: null,
        checkDate: "",
      },
      annexList: [],
      productItemList: [],
      projectOptions: [],
      itemOptions: [],
      lineTypeOptions: [],
      manOptions: [],
      davisOptions: [],
    };
  },

  mounted() {
    // 获取启用用户
    this.getEnableUserListApi();
    // 获取关联计划
    this.getrelaySchemaListApi(15);
    // 获取线别
    this.getDataTypeApi();
    this.getBranchItemListApi();
    this.getManagementListApi();
    let params = this.$route.params;

    if (params.projectId === undefined) {
      this.title = "新增";
    } else {
      this.title = "编辑";
      this.planTypeArr = [params.planType, params.planId];
      // params.planType = [params.planType, params.planId]
      this.productCheck = params;
      this.productItemList = params.productItemVoList;
    }
  },

  methods: {
    branchIdChange(v) {
      this.productItemList = this.itemOptions.filter((el) => {
        return el.id == v;
      })[0].itemList;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      // console.log(':fileList:: ', fileList)
      return this.$confirm(`确定移除 ${file.name}？，${fileList}`);
    },
    handleChange(file, fileList) {
      this.annexList = new FormData();
      fileList.forEach((el) => {
        this.annexList.append("file", el.raw);
      });
      this.annexList.append("type", "/it/product_check/annex");
      this.annexList.append("biId", this.productCheck.id);
    },
    // 保存按钮
    saveHandler() {
      this.productCheck.planId = this.planTypeArr[1];
      this.productCheck.planType = this.planTypeArr[0];
      let params = {
        productCheck: this.productCheck,
        productItemList: this.productItemList,
      };
      if (this.title === "新增") {
        this.saveProductCheckApi(params);
      } else {
        this.updateProductCheckApi(params);
      }
    },
    //
    relaySchemaChange(v) {
      console.log("v::: ", v);
    },
    /**
     * 接口
     */
    // 查询项目列表

    getManagementListApi() {
      getManagementList().then((res) => {
        if (res.code == 200) {
          this.projectOptions = res.data;
        }
      });
    },
    // 获取线别
    getDataTypeApi() {
      getDataType({ type: "ht_line_type" }).then((res) => {
        if (res.code == 200) {
          this.lineTypeOptions = res.data;
        }
      });
    },
    // 分部分项列表
    getBranchItemListApi() {
      getBranchItemList().then((res) => {
        if (res.code == 200) {
          console.log("res,data::: ", res.data);
          this.itemOptions = res.data;
        }
      });
    },
    // 获取关联计划列表
    getrelaySchemaListApi(id) {
      getrelaySchemaList({ id }).then((res) => {
        // console.log('res::: ', res)
        if (res.code == 200) {
          this.relaySchemaOptions = res.data;
          this.relaySchemaOptions.forEach((el) => {
            el.id = el.planType;
            el.name = el.planTypeName;
            if (el.projectPlans.length != 0 && el.projectPlans != null) {
              el.projectPlans.forEach((item) => {
                item.name = item.planCycleStart + "~" + item.planCycleEnd;
              });
            }
          });
        }
      });
    },
    // 获取启用用户
    getEnableUserListApi() {
      getEnableUserList().then((res) => {
        if (res.code == 200) {
          this.manOptions = res.data;
        }
      });
    },
    // 保存
    saveProductCheckApi(params) {
      saveProductCheck(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.$router.push("/processAcceptList");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 编辑
    updateProductCheckApi(params) {
      updateProductCheck(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("编辑成功");
          // let formData = new FormData()

          // formData.append('file', this.annexList)
          // formData.append('type', '/it/product_check')
          // formData.append('biId', this.productCheck.id)
          // let params = {
          //   type: '/it/product_check',
          //   biId: this.productCheck.id,
          //   file: this.annexList,
          // }
          this.uploadAnnexFileApi(this.annexList);
          this.$router.push("/processAcceptList");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 多文件上传
    uploadAnnexFileApi(params) {
      console.log("params::: ", params);
      uploadAnnexFile(params).then((res) => {
        console.log("res::: ", res);
        if (res.code == 200) {
          this.$message.success("上传成功");
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-form-item__label-wrap) {
  margin-left: 0px !important;
}
</style>
